<template>
<div>
          <van-nav-bar
  title="我的关注"
  left-text="返回"
  left-arrow
  @click-left="$router.push('/userinfo')"
/>
    <div class="list">  
       <div class="avaimg" v-for="item in list" :key="item.id">
           <img v-if="item.head_img" :src="$baseURL+item.head_img" alt="">
           <img v-else src="../images/75d28f97ly1fvuzkfr3h5j22c02c07wk.jpg" alt="">
             <div class="info">
           <p>{{item.nickname}}</p>
           <p class="date">{{item.create_date.slice(0,10)}}</p>
       </div>
        <div class="cancel" @click="cancelHandle(item.id)">取消关注</div>
       </div>
    </div>
</div>
   
</template>

<script>
import { getUserFollows, removeFollowsById } from '@/api'
export default {
    data () {
      return {
        list:[]
      }
    },

    mounted(){
     this.getList()
    },
        methods:{
      getList(){
          getUserFollows().then((res)=>{
        this.list=res.data.data
      })
      },
       cancelHandle(id){
        removeFollowsById(id).then((res)=>{
          this.getList()
        })
       }
    }
}
</script>

<style lang="less" scoped>
 .list {
  .avaimg {
      height: 100px;
      border-bottom: 3px solid #d7d7d7;
      padding: 0 10px;
      display: flex;
      align-items: center;
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
    
  .info {
      flex: 1;
      margin-left: 10px;
     
    p {
      padding:5px 0;
    }

    .date {
      color: #aeaeae;
    }
  }

  .cancel {
     width: 70px;
     height: 30px;
     background-color: #e1e1e1;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 15px;
     font-size: 12px;
  }
  }
}
</style>